<template>
  <div style="min-height: 500px">
    <a-tree ref="rolepermissiontree" :fieldNames="{ key: 'id',title: 'label'}" :data="state.treeData" checkable check-strictly></a-tree>
    <div class="mt10">
      <a-button type="primary" size="mini" @click="saveRolePermission">确定</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { Message } from '@arco-design/web-vue'
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";

const rolepermissiontree = ref(null)
let props = defineProps({
  roleId : {type : Number, default: 0}
})
const state = reactive({
  treeData :[],
})

const loadRolePermissionTreeData = ()=>{
  axios.post('/sys/role/getrolepermission', {roleId:props.roleId}).then( (res) => {
    const {data} = res;
    state.treeData = data.permissionAllNode
    nextTick(()=>{
      rolepermissiontree.value.expandAll()
      rolepermissiontree.value.checkNode(data.checkedIds, true)
    })
  })
}
const saveRolePermission = ()=>{
  let rolePermissionsTreeNodes = rolepermissiontree.value.getCheckedNodes();
  let rolePermissions = rolePermissionsTreeNodes.map( (node) => node.id)
  axios.post('/sys/role/saverolepermission', {roleId : props.roleId, rolePermissions:rolePermissions}).then(res=>{
    const {code,msg} = res;
    if(code === '200'){
      Message.success(msg)
    }
  })
}
onMounted(()=>{
  loadRolePermissionTreeData();
})
</script>

<style scoped>

</style>
